import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  PixelRatio,
    Alert
} from 'react-native';

//输入框组件
export default class Component07 extends Component {
  //构造函数
  constructor(props) {
    super(props);
    this.state = {
        text: '',
        show: false,
        data:[],
        filterData:[]
        };
  }


  componentDidMount() {
//    fetch(`${API}/films/`).then(res => res.json()).then((json) => {
//      const { results: films } = json;
//      this.setState({ films });
//    });
    this.setState({
        data:['abc','a1','b2']
    })

  }
  //组件渲染
  render() {
    return (
      <View style={styles.flex}>
          <View style={[styles.flexDirection, styles.inputHeight]}>
            <View style={styles.flex}>
              <TextInput
                style={styles.input}
                returnKeyType="search"
                placeholder="请输入关键字"
                value={this.state.text}
                onChangeText={this.textChange.bind(this)}/>
            </View>
            <View style={styles.btn}>
              <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
            </View>
          </View>
          {this.state.show?
            <View style={styles.list}>
             {this.returnData()}
            </View>
            : null
          }
      </View>
    );
  }

  returnData(){
     const _this = this;
     const tmpdata= this.state.data.filter(this.filterInputData)

     return  tmpdata.map(function(v,i){
            return <Text key={i} ellipsizeMode='tail'
                onPress={() => _this.setState({
                    show: false,
                    text:v
                    })}
                style={styles.item} numberOfLines={1}>{v}</Text>

          })

  }

    filterInputData=(element)=> {
      var regex = new RegExp(this.state.text, 'i');
      return regex.test(element);
    }


  //输入框文字改变
  textChange(text){
    this.setState({
      show: text!="" ? true : false,
      text: text,

    });
  }

  //隐藏自动提示列表
  hideList(){
    this.setState({
      show: false,
    });
  }

  //搜索按钮点击
  search(){
    alert("您输入的内容为："+this.state.text);
  }
}



//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
  search:{
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  list:{
    marginTop: 1/PixelRatio.get(),
    marginLeft:5,
    marginRight:5,
    height:200,
    borderColor:'#ccc',
    borderTopWidth: 1/PixelRatio.get(),
  },
  item:{
    fontSize:16,
    padding:5,
    paddingTop:10,
    paddingBottom:10,
    borderWidth: 1/PixelRatio.get(),
    borderColor:'#ddd',
    borderTopWidth:0,
  }
});